<template>
  <div class="pageCard">
    <el-card>
      <div :class="type">
        <span class="titleBorder">|</span>
        <div class="titleText">{{ titleName }}</div>
        <slot name="header" />
        <el-divider />
      </div>
      <el-scrollbar
        style="flex:1"
        :vertical="true"
      >
        <slot />
      </el-scrollbar>
      <slot name="footer" />
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'PageCard',
  props: {
    titleName: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'pageTitle'
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.pageCard {
  height: 100%;
  padding: 10px 10px 10px 10px;
  position: relative;
  .scrollbarCss {
    height: calc(100% - 30px);
  }
  /deep/ .el-card__body {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  /deep/ .el-card.is-always-shadow {
    height: 100%;
  }
  /deep/ .el-card__body {
    padding: 1rem;
  }
  /deep/ .el-divider--horizontal {
    margin: 0.7rem 0px;
  }
  /deep/.el-scrollbar__wrap {
    overflow-x: hidden;
  }
  /deep/.el-scrollbar__view {
    height: 95%;
  }
  .pageTitle {
    font-size: 20px;
    position: relative;
    .titleBorder {
      font-weight: bold;
      font-size: 22px;
      color: #0062ff;
      margin-right: 5px;
    }
    .titleText {
      display: inline;
      padding-right: 20px;
      padding-left: 5px;
    }
  }
  .smallTitle {
    font-size: 16px;
    .titleBorder {
      font-weight: bold;
      font-size: 16px;
      color: #0062ff;
      margin-right: 5px;
    }
    .titleText {
      display: inline;
      padding-right: 20px;
      padding-left: 5px;
    }
  }
}
</style>
